<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header>
      <!--      <div class="v-logo">-->
      <!--        <a-icon type="crown" style="color: #fff;margin-right:7px"/>-->
      <!--        <span>教务管理系统</span>-->
      <!--      </div>-->
      <!--      <div class="logo"/>-->
      <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['1']"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="4" @click="backToCourse">
          <a-icon type="rollback" style="color: #fff;margin-right:7px"/>返回课程列表
        </a-menu-item>
        <a-menu-item key="0" disabled>
          <div class="v-logo">
            <a-icon type="crown" style="color: #fff;margin-right:7px"/>
            <span>教务管理系统</span>
          </div>
        </a-menu-item>
        <a-menu-item key="1" @click="showSessionInfo">
          课程详情
        </a-menu-item>
        <a-menu-item key="2" @click="showSessionStudents">
          选课学生
        </a-menu-item>
        <a-menu-item key="3" @click="showSessionScore">
          课程成绩
        </a-menu-item>
      </a-menu>

    </a-layout-header>
    <div style="margin: 0 50px; height: auto">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>Teacher</a-breadcrumb-item>
        <a-breadcrumb-item>Session</a-breadcrumb-item>
      </a-breadcrumb>
      <div class="content"><!-- 课程信息 -->
        <sessionInfo :show="showInfo" :courseItem="course"></sessionInfo>
        <!-- 选课学生-->
        <sessionStudents :show="showStudents" :courseItem="course"></sessionStudents>
        <!-- 课程成绩-->
        <sessionScore :show="showScore" :courseItem="course"></sessionScore>
      </div>
    </div>
    <a-layout-footer class="footer">
      Copyright &copy; 2020 {{ organization }}
    </a-layout-footer>

  </a-layout>
</template>

<script>

import app from "../../App";
import getUserInfo from "@/api/users/userInfo";
import {getCourseInfo} from "@/api/teacher/courseInfo";
import {querySelection} from "../../api/teacher/querySelection";

import sessionInfo from "../../components/sessionInfo";
import sessionScore from "../../components/sessionScore";
import sessionStudents from "../../components/sessionStudents"

export default {
  components: {
    sessionInfo,
    sessionScore,
    sessionStudents
  },
  data() {
    return {
      course: {},
      courseInfo: {},
      infoModelShow: false,
      passwordModelShow: false,
      reminderShow: false,
      collapsed: false,
      organization: "",
      userInfo: {},
      showInfo: true,
      showScore: false,
      showStudents: false,
    }
  },
  created() {
    if (localStorage.getItem("session") == undefined) {
      this.$router.push({name: "courseTable"});
      return
    }
    this.course = JSON.parse(localStorage.getItem("session"));
    this.showSessionInfo();
  },
  methods: {
    showSessionScore() {
      this.showInfo = false;
      this.showScore = true;
      this.showStudents = false;
    },
    showSessionInfo() {
      this.showInfo = true;
      this.showScore = false;
      this.showStudents = false;
    },
    showSessionStudents() {
      this.showInfo = false;
      this.showScore = false;
      this.showStudents = true;
    },
    loadUserInfo() {
      getUserInfo().then(res => {
        if (res.result) {
          this.userInfo = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getCourseInfo() {
      let self = this;
      getCourseInfo(self.course.courseId).then(res => {
        if (res.result) {
          self.courseInfo = res.courseInfo;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    getStudents() {
      let self = this;
      querySelection(self.course.courseId).then(res => {
        if (res.result) {
          self.studentNum = res.total;
          self.students = res.nameList;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    backToCourse(){
      localStorage.removeItem("session");
      this.$router.push({name: "teacherCourse"});
    }
  },
  mounted() {
    this.organization = app.organization;
    this.loadUserInfo();
    this.getCourseInfo();
    this.getStudents();
  }
}
</script>

<style scoped src="./css/course.css"></style>

<style scoped>
.content{
  background: #fff;
  padding:24px;
  min-height: 522px;
  height: auto;
}
</style>
